<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import { ElTable } from 'element-plus'
defineOptions({
  name: 'TableCom'
})
const props = defineProps({
  tableConfig: {
    type: Object,
    default: () => {}
  }
})
const columns = computed(() => props.tableConfig.columns.filter((item: { action: any }) => !item.action))
const operation = computed(() => props.tableConfig.columns.find((item: { action: any }) => item.action))
const emit = defineEmits(['refresh'])
/** 改变当前页码 */
const handleCurrentChange = (value: number) => {
  props.tableConfig.pageConfig.currentPage = value
  emit('refresh')
}
/** 改变页面大小 */
const handleSizeChange = (value: number) => {
  props.tableConfig.pageConfig.size = value
  emit('refresh')
}
// 自定义索引
const indexMethod = (index: number) => {
  const { currentPage, size } = props.tableConfig.pageConfig
  return (currentPage - 1) * size + index + 1
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const handleSelectionChange = (val: any[]) => {
  const ids = val.map((item) => item[props.tableConfig.rowKey])
  props.tableConfig.selection = ids
}
watchEffect(() => {
  // 默认禁用项
  if (props.tableConfig.disabledSelection) {
    props.tableConfig.tableData.forEach((row: any) => {
      if (props.tableConfig.disabledSelection.includes(row.id)) {
        multipleTableRef.value?.toggleRowSelection(row, false)
      }
    })
  }
  // 默认选中项
  if (props.tableConfig.selection) {
    props.tableConfig.tableData.forEach((row: any) => {
      if (props.tableConfig.selection.includes(row.id)) {
        multipleTableRef.value?.toggleRowSelection(row, true)
      }
    })
  }
})
</script>

<template>
  <el-card shadow="never">
    <div class="toolbar-wrapper" v-if="tableConfig.btnList.length">
      <el-button
        v-for="item in tableConfig.btnList"
        :key="item.name"
        :type="item.type"
        :icon="item.icon"
        @click="item.click"
      >
        {{ item.name }}
      </el-button>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableConfig.tableData"
      style="width: 100%"
      :max-height="500"
      :header-cell-style="{ background: '#f5f7fa' }"
      :row-key="tableConfig.rowKey"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="tableConfig.showSelection" type="selection" width="55" />
      <el-table-column v-if="tableConfig.showIndex" type="index" label="序号" width="80" :index="indexMethod" />
      <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.width || 160"
        :show-overflow-tooltip="item.tooltip || true"
      >
        <template #default="scope">
          <slot :name="item.slotName" v-if="item.slotName" :scope="scope" />
          <span v-else>{{ scope.row[item.prop].toString() || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="operation.action"
        :fixed="operation.fixed || 'right'"
        :label="operation.label || '操作'"
        :width="operation.width || 180"
        :align="operation.align || 'center'"
      >
        <template #default="scope">
          <slot name="action" :scope="scope" />
        </template>
      </el-table-column>
    </el-table>
    <div class="pager-wrapper" v-if="tableConfig.pageConfig.total">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        :total="tableConfig.pageConfig.total"
        :page-size="tableConfig.pageConfig.size"
        :currentPage="tableConfig.pageConfig.currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<style lang="scss" scoped>
.toolbar-wrapper {
  display: flex;
  margin-bottom: 20px;
}
.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
